<template>
  <div class="btnDetail">
    <el-dialog class="dialog500" :close-on-click-modal="false" :append-to-body="true" title="车辆信息" :visible.sync="dialogFormVisibleAdd" @opened="$store.commit('dialogTop')" @close="resetForm('ruleFormAdd')">
      <div style="margin: 5px 0;">
        <el-row >
          <el-col :offset="1"  :span="11">
            <div style="line-height: 35px;font-size:13px;">
              <span style="color:#50545D; ">责任企业：</span>
              <span style="color:#3975FE;font-weight: bold;">{{info.enterpriseName}}</span>
              <el-popover
                title=""
                width="200"
                trigger="click"
                @show="loadOperator"
                >
                <div class="operator-list">
                  <div class="item" v-for="(item,index) in operatorList" :key="index">{{item.userName}}：{{item.mobile}}</div>
                </div>
                <span style="color:#39befe; margin-left: 20px; cursor: pointer;" slot="reference">运维人员</span>
              </el-popover>              
            </div>
          </el-col>
          <el-col :span="12">
            <div style="line-height: 35px;font-size:13px;">
              <span style="color:#50545D; ">车辆识别码：</span>
              <span style="color:#3975FE;font-weight: bold;">{{info.violationVehicle}}</span>
            </div>
          </el-col>
        </el-row>
        <el-row >
          <el-col :offset="1" :span="11">
            <div style="line-height: 35px;font-size:13px;">
              <span style="color:#50545D; ">经度：</span>
              <span style="color:#3975FE;font-weight: bold;">{{info.lat}}</span>
            </div>

          </el-col>
          <el-col :span="12">
            <div style="line-height: 35px;font-size:13px;">
              <span style="color:#50545D; ">纬度：</span>
              <span style="color:#3975FE;font-weight: bold;">{{info.lng}}</span>
            </div>
          </el-col>
        </el-row>
        <siteMap ref="siteMap" :centerLatLng="centerLatLng"></siteMap>
       </div>
    </el-dialog>
  </div>
</template>

<script>
  import siteMap from './siteMap.vue'
  export default {
    props:[],
    data () {
      return {
        info: { },
        dialogFormVisibleAdd: false,
        centerLatLng: [],
        operatorList: [],
      }
    },
    components:{siteMap},
    created(){

    },
    methods: {
      dialogOpen(id){
        this.axios.post(process.env.API_HOST + `/vehicle/selectAlarmDetail`, {id:id})
          .then(response => {
            const result = response.data
            if (result.code == 200) {
              this.info = result.result
              this.centerLatLng=[result.result.lng,result.result.lat]
              this.dialogFormVisibleAdd=true
              this.$refs.siteMap.getRailMapSet()
            }
          })
      },
      loadOperator(){
        this.operatorList = []
        this.axios.post(process.env.API_HOST + `/vehicle/selectAlarmOperator`, {id:this.info.id})
          .then(response => {
            const result = response.data
            if (result.code == 200) {
              this.operatorList = result.result
            }
          })
      },
      resetForm() {
        this.info={}
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" >
  @import "../../../common/stylus/mixin.styl"
  .btnDetail
    display inline-block
  .dialog500 .el-dialog
    width 500px !important
    font-family 'SourceHanSansCN-Medium'
    text-align left
  .operator-list
    .item
      margin-bottom 5px
      &:last-child
        margin-bottom 0

</style>
